import React, { useCallback } from 'react'
import { SimpleSelector } from './simpleSelector'
import { ContentType } from '../../common/enums'

export const ContentTypeSelector = ({ initValue, onSelectItem, readOnly }) => {
    const dataSource = Object.keys(ContentType).map(name => ({ name, value: ContentType[name] }))
    const getItemValue = React.useCallback(item => item.value, [])
    const renderItem = React.useCallback(item => `${item.name}[${item.value}]`, [])
    const wrapOnSelectItem = useCallback(item => onSelectItem(item), [onSelectItem])
    const filterDataSource = React.useCallback(value => item => {
        return item.name.toUpperCase().includes(value.toUpperCase()) || item.value.toUpperCase().includes(value.toUpperCase())
    }, [])

    return <SimpleSelector dataSource={dataSource} filterDataSource={filterDataSource}
        getItemValue={getItemValue} initValue={initValue} onSelectItem={wrapOnSelectItem}
        readOnly={readOnly} renderItem={renderItem} />
}